import {   Graph, Addon, Shape } from '@antv/x6';
import { cSt, cEd, rUn, rScript} from '../x6/nodes'


const { Rect, Circle } = Shape

function mergeNodes(uNodes, seNodes) {
  const nodes = []

  seNodes[0].position( 0, 0)
  nodes.push(seNodes[0])

  const widthlen = 150
  for( let i = 0; i < uNodes.length; i++){
    uNodes[i].position( widthlen * (i + 1), 0)
    nodes.push(uNodes[i])
  }
  
  seNodes[1].position( widthlen * (uNodes.length + 1), 0)
  nodes.push(seNodes[1])

  return nodes
}

function initSENodes(datas) {
  const name = datas['name']
  const overtime = datas['overtime']
  const processid = datas['processid']
  const version = datas['version']
  const inputParameter = datas['input-parameter']
  const outputParameter = datas['output-parameter']
  const outputContext = datas['output-context']

  const nodes = []

  const uSnode = cSt.clone()
  uSnode.setData({"name":name, 'overtime':overtime, 'processid':processid,
  'version':version, 'input-parameter':inputParameter, 'output-parameter':outputParameter,
  'output-context':outputContext})

  //console.log(uSnode.getAttrs()['kind']['type'])
  const uEnode = cEd.clone();

  nodes.push(uSnode)
  nodes.push(uEnode)

  return nodes
}

function initUnitNodes(datas) {
  const activities = datas['activities']
  const activity = activities['activity']

  const nodes = []

  const widthlen = 150
  for (let i = 0; i < activity.length; i++) {
    const rUntmp = rUn.clone()
    rUntmp.setData(activity[i])
    rUntmp.position( widthlen * i, 0)
    rUntmp.attr('text/text', activity[i]['name'])
    rUntmp.attr('text/fill', 'white')
    console.log(rUntmp.getData())
    nodes.push(rUntmp)
  }

  return nodes
}

function initUnitEdges(nodes) {
  const edges = []
  for (let i: number = 0; i < nodes.length-1; i++){

    const edge = new Shape.Edge({
      source:{cell:nodes[i], port:'port2'}, 
      target:{cell:nodes[i+1], port:'port1'}
    })
    edges.push(edge)
  }

  return edges
}

export function graphinit(graph, datas) {

        datas["name"]
        //const jp = JSON.parse(datas)
        // console.log(datas["Name"])

        // rUn.setData({"123":"123"})
        // console.log(rUn.getData())
        // rUn.attr('text/text', 'unitsvr')
        // rUn.attr('text/fill', 'white')
        // const rUn1 = rUn.clone()
        // console.log(rUn1.id)
        // console.log(rUn.id)

        // rUn1.position(150,0)
        // rUn1.attr('text/text', 'unitsvr1')
        // rUn1.attr('text/fill', 'white')
        // const nodes = []
        // nodes.push(rUn)
        // nodes.push(rUn1)
        
        const uNodes = initUnitNodes(datas)
        const seNodes = initSENodes(datas)
        const nodes = mergeNodes(uNodes, seNodes)
        const edges = initUnitEdges(nodes)

        console.log(nodes)
        graph.addNodes(nodes)
        graph.addEdges(edges)
        
        graph.centerContent()

        
}


function initStenNodes(datas) {
  const activity = datas

  const nodes = []

  const widthlen = 150
  for (let i = 0; i < activity.length; i++) {
    const rUntmp = rUn.clone()
    rUntmp.setData(activity[i])
    rUntmp.position( widthlen * i, 0)
    rUntmp.attr('text/text', activity[i]['name'])
    rUntmp.attr('text/fill', 'white')
    console.log(rUntmp.getData())
    nodes.push(rUntmp)
  }

  return nodes
}

export function stencilinit(graph, datas) {
  const stencil = new Addon.Stencil({
    title: 'Components',
    target: graph,
    stencilGraphWidth: 250,
    stencilGraphHeight: 400,
    groups: [
      {
        name: 'unitSvr',
        title: 'UnitSvr',
      },
      {
        name: 'unitFun',
        title: 'FuncSvr',
      },
    ],
  })

  document.getElementById('stencil')?.appendChild(stencil.container)
  const nodes = initStenNodes(datas)

  stencil.load(nodes, 'unitSvr')
  stencil.load([cSt, cEd, rScript], 'unitFun')
}
